<template>
    <div class = "swiperBanner">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide
          v-for="(item, index) of imglist"
          :key="index"
        >
          <a :href="item.linkTo">
            <img :src="item.imgUrl" alt="">
          </a>
        </swiper-slide>
        <!-- Optional controls -->
    </swiper>
    </div>
</template>

<script>
export default {
  name: 'Banner',
  data: function () {
    return {
      imglist: [
        {
          imgUrl: 'https://www.juaicai.cn:4080/images/shuffimg/image0d4c43617b724444891f9356a7d6b04d15218021671041.jpg',
          linkTo: 'https://www.douyu.com/4474712'
        },
        {
          imgUrl: 'https://www.juaicai.cn:4080/images/shuffimg/image9fd4fbfc29744f37b0fa994377635aa51500715106663.jpg',
          linkTo: 'https://www.juaicai.cn/wap/about/knowJac'
        },
        {
          imgUrl: 'https://www.juaicai.cn:4080/images/shuffimg/imagec12bcb9c786d4147930bec0bd99b7aa215280949370201.jpg',
          linkTo: 'https://www.juaicai.cn/wap/activity/info?type=3&id=html9d5748887dfb45ebab703f5984a9906e'
        }
      ],
      swiperOption: {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 8,
        loop: true,
        autoplay: 3000
      }
    }
  }
}
</script>

<style lang = 'stylus' scoped>
.swiperBanner
  background: #f2f2f2
  padding : .2rem 0
  .swiper-slide
    width: 4.94rem!important
    img
        width: 100%
        display : block
        margin: 0 auto
        border-radius : .1rem
</style>
